<template>
  <div class="pageMain">
    <div class="pageMain-btn">
      <el-button @click="rowHandle('add')">新增菜单</el-button>
      <el-button @click="rowHandle('deleteAll')" plain type="danger"
        >批量删除</el-button
      >
    </div>
    <div class="pageMain-search">
      <el-input
        v-model="filterData.menuName"
        placeholder="请输入菜单名称"
        style="width: 180px"
        clearable
      />
      <el-button type="primary" @click="menuPage">搜索</el-button>
    </div>

    <el-table
      :data="tableData"
      style="width: 100%"
      border
      @selection-change="tableSelectionChange"
      v-loading="dataLoading"
    >
      <el-table-column type="selection" min-width="60" />
      <el-table-column type="index" min-width="60" />
      <el-table-column prop="menuName" label="菜名" min-width="180">
      </el-table-column>
      <el-table-column prop="price" label="价格" min-width="50">
      </el-table-column>
      <el-table-column prop="menuImage" label="菜图" min-width="180">
        <template slot-scope="{ row }">
          <div>
            <el-image
              style="width: 50px;height:50px;"
              :src="row.menuImage"
              :preview-src-list="[row.menuImage]"
            ></el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" min-width="180">
        <template slot-scope="{ row }">
          <div>
            {{ $dayjs(row.updateTime).format("YYYY-MM-DD HH:mm") }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="menuDesc" label="简介" min-width="100">
      </el-table-column>
      <el-table-column prop="menuDesc" label="操作" min-width="150">
        <template slot-scope="{ row }">
          <div>
            <el-button type="primary" @click="rowHandle('edit', row)"
              >编辑</el-button
            >
            <el-button type="danger" @click="rowHandle('delete', row)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="pageMain-page">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="10"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>

    <el-dialog title="操作" :visible.sync="formVisible" width="50%">
      <div class="dialogFrom">
        <el-form ref="form" :model="formData" label-width="80px">
          <el-form-item label="菜单名称">
            <el-input v-model="formData.menuName"></el-input>
          </el-form-item>
          <el-form-item label="菜单价格">
            <el-input v-model="formData.price" type="number"></el-input>
          </el-form-item>
          <el-form-item label="菜单图片">
            <div class="imgUpload">
              <ImgUpload @success="uploadSuccess" v-if="!formData.menuImage" />
              <div class="imgUpload-preview" v-else>
                <img :src="formData.menuImage" alt="" />
                <i class="el-icon-delete del" @click="delImg"></i>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="菜单简介">
            <el-input v-model="formData.menuDesc" type="textarea"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="submitForm('cancel')">取 消</el-button>
        <el-button type="primary" @click="submitForm('confirm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import ImgUpload from "@/components/ImgUpload.vue";
const baseData = {
  menuName: "",
  page: 1,
  row: 10
};
const baseFormData = {
  menuName: "",
  menuImage: "",
  menuDesc: "",
  price: ""
};

export default {
  props: {},
  components: { ImgUpload },
  data() {
    return {
      tableData: [],
      selectData: [],
      filterData: {
        ...baseData
      },
      total: 0,
      dataLoading: false,
      formVisible: false,
      formType: "add",
      formData: {
        ...baseFormData
      }
    };
  },
  created() {
    this.menuPage();
  },
  methods: {
    // 切换页码
    handleCurrentChange(val) {
      this.filterData.page = val;
      this.menuPage();
    },
    // 表格多选框勾选
    tableSelectionChange(selection) {
      this.selectData = selection;
    },
    // 数据处理：新增/编辑/删除
    rowHandle(type, row) {
      this.formType = type;
      if (type === "add") {
        this.formVisible = true;
        this.formData = { ...baseFormData };
      } else if (type === "edit") {
        this.formVisible = true;
        this.formData = row;
      } else if (type === "delete") {
        this.$confirm(`确认删除【${row.menuName}】?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.menuDelete([row.id]);
          })
          .catch(() => {});
      } else if (type === "deleteAll") {
        const ids = this.selectData.map(v => v.id);
        const names = this.selectData.map(v => v.menuName);
        if (!ids.length) return this.$message.warning("请先选择要删除的数据");
        this.$confirm(`确认删除【${names.join("、")}】?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.menuDelete(ids);
          })
          .catch(() => {});
      }
    },
    // 成功上传图片
    uploadSuccess(imgurl) {
      this.formData.menuImage = imgurl;
    },
    // 删除图片
    delImg(imgurl) {
      this.formData.menuImage = "";
    },
    // 确认表单提交：新增/编辑
    async submitForm(type) {
      if (type === "confirm") {
        this.formVisible = false;
        if (this.formType == "add") {
          this.menuSave(this.formData);
        } else if (this.formType == "edit") {
          this.menuUpdate(this.formData);
        }
      } else {
        this.formVisible = false;
      }
    },
    // 带有async字符的一般涉及接口
    // 获取菜单列表
    async menuPage() {
      this.dataLoading = true;
      try {
        const res = await this.$api.menuPage(this.filterData);
        this.dataLoading = false;

        this.tableData = res.data.list;
        this.total = +res.data.total;
      } catch (error) {
        this.dataLoading = false;
      }
    },
    // 新增菜单
    async menuSave(data) {
      try {
        const res = await this.$api.menuSave(data);
        if (res.code == 0) {
          this.$message.success("添加成功");
          this.menuPage();
        }
      } catch (error) {}
    },
    // 编辑菜单
    async menuUpdate(data) {
      try {
        const res = await this.$api.menuUpdate(data);
        if (res.code == 0) {
          this.$message.success("编辑成功");
          this.menuPage();
        }
      } catch (error) {}
    },
    // 删除菜单
    async menuDelete(ids) {
      this.$api.menuDelete(ids).then(res => {
        if (res.code == 0) {
          this.$message.success("删除成功");
          this.menuPage();
        }
      });
    }
  }
};
</script>
<style scoped lang="scss"></style>
